import React from 'react'
import { PrimaryButton, Text, DetailsList, DetailsListLayoutMode, SelectionMode } from '@fluentui/react'
import { useSelector, useDispatch } from 'react-redux';



function DataDisplay() {
    const dispatch = useDispatch();
    const count = useSelector(state => state.count);
    const users = useSelector(state => state.users);

    const columns = [
        { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
        { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100 },
    ]

    return (
        <div>
            <Text>Global count: {count}</Text>
            <p></p>
            <PrimaryButton
                text="Increment Global"
                onClick={() => dispatch({ type: 'INCREMENT' })}
            />
            <DetailsList
                items={users}
                columns={columns}
                layoutMode={DetailsListLayoutMode.justified}
                selectionMode={SelectionMode.multiple}
            />
        </div>
    );
}


export default DataDisplay;